<template>
	<view class="container">
		<z-paging-swiper>
			<view slot="top">
				<u-navbar height="50" back-icon-color="#333" title="我的团队"
					title-color="#333" title-size="36"></u-navbar>
				<view class="tabsView">
					<u-tabs-swiper ref="uTabs" :list="tabsList" :current="current"
						@change="tabsChange" :is-scroll="false"
						active-color="#333" swiperWidth="750">
					</u-tabs-swiper>
				</view>
			</view>
			<swiper class="swiper" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<z-paging ref="paging" v-model="itemList" @query="queryList" :flex="true" empty-view-text="暂无数据~"
						empty-view-img="/static/empty.png" :empty-view-img-style="imgStyle">
						<view class="teamView" slot="top">
							<image class="teamIcon" src="/static/chart.png"></image>
							<view class="teamCount">您共有<text>{{dirTotal}}人</text>直推</view>
						</view>
						<view class="itemView" v-for="(item,index) in itemList" :key="index">
							<image class="itemIcon" src="/static/tab.png"></image>
							<view class="itemInfo">
								<view class="infoView">
									<view class="username">欧阳春雪</view>
									<view class="itemText">姓名</view>
								</view>
								<view class="timeView">
									<view class="itemTime">2023-05-22</view>
									<view class="itemText">注册时间</view>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
				<swiper-item class="swiper-item">
					<z-paging ref="paging2" v-model="itemList2" @query="queryList2" :flex="true" empty-view-text="暂无数据~"
						empty-view-img="/static/empty.png" :empty-view-img-style="imgStyle">
						<view class="teamView" slot="top">
							<image class="teamIcon" src="/static/chart.png"></image>
							<view class="teamCount">您共有<text>{{indirTotal}}人</text>间推</view>
						</view>
						<view class="itemView" v-for="(item,index) in itemList2" :key="index">
							<image class="itemIcon" src="/static/tab.png"></image>
							<view class="itemInfo">
								<view class="infoView">
									<view class="username">欧阳春雪</view>
									<view class="itemText">姓名</view>
									<view class="itemTips">推荐人：张某某</view>
								</view>
								<view class="timeView">
									<view class="itemTime">2023-05-22</view>
									<view class="itemText">注册时间</view>
								</view>
							</view>
						</view>
					</z-paging>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgStyle: {
					width: '12rem'
				},
				current: 0,
				swiperCurrent: 0,
				tabsList: [{
					name: '直推'
				}, {
					name: '间推'
				}],
				page: 1,
				itemList: [{},{}],
				itemList2: [],
				dirTotal: 0,
				indirTotal: 0
			}
		},
		onLoad() {
			let self = this;
			this.$nextTick(function() {
				self.$refs.paging.reload();
			});
		},
		methods: {
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			queryList(page, pageSize) {
				let self = this;
				// self.$user.orderList({
				// 	limit: 10,
				// 	page: this.page
				// }, true).then(res => {
				// });
			},
			queryList2(page, pageSize) {
				
			},
			onScrollBottom(e) {
				this.page++;
				this.initData();
			}
		}
	}
</script>

<style>
	@import url('my-team.css');

	page {
		height: 100%;
		background: #F0F1F2;
	}
</style>
